<html>
<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Demo - DPL Tabs</title>
    <link
            href="../../../../g.tbcdn.cn/kissy/k/1.3.1/css/dpl/--base.css,badges.css,forms.css,icons.css,labels.css,tables.css-20130815" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/css/dpl/??base.css,badges.css,forms.css,icons.css,labels.css,tables.css?20130815"
            rel="stylesheet"/>
    <link
            href="../../../../g.tbcdn.cn/kissy/k/1.3.1/fi000002.css" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/??button/assets/dpl.css,calendar/assets/dpl.css,menu/assets/dpl.css,combobox/assets/dpl.css,menubutton/assets/dpl.css,overlay/assets/dpl.css,split-button/assets/dpl.css,tabs/assets/dpl.css,tree/assets/dpl.css?20130815"
            rel="stylesheet"/>

    <link href="../assets/docs.css-20130815" tppabs="http://docs.kissyui.com/1.3/dpl/assets/docs.css?20130815" rel="stylesheet"/>

    <link rel="stylesheet" href="../assets/prettify.css-20130815" tppabs="http://docs.kissyui.com/1.3/dpl/assets/prettify.css?20130815">
    <script type="text/javascript" src="../assets/prettify.js" tppabs="http://docs.kissyui.com/1.3/dpl/assets/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div class="container">
    <h2>KISSY.Tabs</h2>

    <div class="row-fluid">
        <div class="span8">
            <h3>简介</h3>

            <p>KISSY Tabs 支持四种格式：top(default),left,bottom,left</p>

            <p>只要 new 时配置下或者 markup 中指定不同的 class 即可。</p>
        </div>
        <div class="span16">

            <h3>实例</h3>

            <div class="ks-tabs">
                <div class="ks-tabs-bar">
                    <div class="ks-tabs-tab ks-button ks-tabs-tab-selected">Section 1</div>
                    <div class="ks-tabs-tab ks-button">Section 2</div>
                    <div class="ks-tabs-tab ks-button">Section 3</div>
                </div>
                <div class="ks-tabs-body">
                    <div class="ks-tabs-panel ks-tabs-panel-selected">
                        <p>I'm in Section 1.</p>
                    </div>
                    <div class="ks-tabs-panel">
                        <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div class="ks-tabs-panel">
                        <p>What up girl, this is Section 3.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row-fluid">
        <div class="span12">
<pre class="prettyprint linenums">
&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#32;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#45;&#116;&#111;&#112;&#34;&#62;&#10;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#45;&#98;&#97;&#114;&#34;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#45;&#116;&#97;&#98;&#32;&#107;&#115;&#45;&#98;&#117;&#116;&#116;&#111;&#110;&#32;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#45;&#116;&#97;&#98;&#45;&#115;&#101;&#108;&#101;&#99;&#116;&#101;&#100;&#34;&#62;&#83;&#101;&#99;&#116;&#105;&#111;&#110;&#32;&#49;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#45;&#116;&#97;&#98;&#32;&#107;&#115;&#45;&#98;&#117;&#116;&#116;&#111;&#110;&#34;&#62;&#83;&#101;&#99;&#116;&#105;&#111;&#110;&#32;&#50;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#45;&#116;&#97;&#98;&#32;&#107;&#115;&#45;&#98;&#117;&#116;&#116;&#111;&#110;&#34;&#62;&#83;&#101;&#99;&#116;&#105;&#111;&#110;&#32;&#51;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#32;&#32;&#32;&#32;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#45;&#98;&#111;&#100;&#121;&#34;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#45;&#112;&#97;&#110;&#101;&#108;&#32;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#45;&#112;&#97;&#110;&#101;&#108;&#45;&#115;&#101;&#108;&#101;&#99;&#116;&#101;&#100;&#34;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#112;&#62;&#73;&#39;&#109;&#32;&#105;&#110;&#32;&#83;&#101;&#99;&#116;&#105;&#111;&#110;&#32;&#49;&#46;&#60;&#47;&#112;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#45;&#112;&#97;&#110;&#101;&#108;&#34;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#112;&#62;&#72;&#111;&#119;&#100;&#121;&#44;&#32;&#73;&#39;&#109;&#32;&#105;&#110;&#32;&#83;&#101;&#99;&#116;&#105;&#111;&#110;&#32;&#50;&#46;&#60;&#47;&#112;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#116;&#97;&#98;&#115;&#45;&#112;&#97;&#110;&#101;&#108;&#34;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#112;&#62;&#87;&#104;&#97;&#116;&#32;&#117;&#112;&#32;&#103;&#105;&#114;&#108;&#44;&#32;&#116;&#104;&#105;&#115;&#32;&#105;&#115;&#32;&#83;&#101;&#99;&#116;&#105;&#111;&#110;&#32;&#51;&#46;&#60;&#47;&#112;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#32;&#32;&#32;&#32;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#60;&#47;&#100;&#105;&#118;&#62;
</pre>            
        </div>
        <div class="span12">
<pre class="prettyprint linenums">
KISSY.use("tabs", function (S, Tabs) {

    S.all(".ks-tabs").each(function (n) {
        new Tabs({
            srcNode: n
        }).render();
    });

});    
</pre>               
        </div>
    </div>

    <h3>各种方向的 tab</h3>


    <div class="row-fluid">
        <div class="span8">
            <h4>tab 在底部</h4>

            <p>tabs 体在顶部，tab 在底部</p>

            <div class="ks-tabs ks-tabs-bottom">
                <div class="ks-tabs-body">
                    <div class="ks-tabs-panel ks-tabs-panel-selected">
                        <p>I'm in Section 1.</p>
                    </div>
                    <div class="ks-tabs-panel">
                        <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div class="ks-tabs-panel">
                        <p>What up girl, this is Section 3.</p>
                    </div>
                </div>
                <div class="ks-tabs-bar">
                    <div class="ks-tabs-tab ks-button ks-tabs-tab-selected">Section 1</div>
                    <div class="ks-tabs-tab ks-button">Section 2</div>
                    <div class="ks-tabs-tab ks-button">Section 3</div>
                </div>
            </div>
        </div>
        <div class="span8">
            <h4>tab 在左侧</h4>

            <p>tabs 体在右侧，tab 在左侧</p>

            <div class="ks-tabs ks-tabs-left">
                <div class="ks-tabs-bar">
                    <div class="ks-tabs-tab ks-button ks-tabs-tab-selected">Section 1</div>
                    <div class="ks-tabs-tab ks-button">Section 2</div>
                    <div class="ks-tabs-tab ks-button">Section 3</div>
                </div>
                <div class="ks-tabs-body">
                    <div class="ks-tabs-panel ks-tabs-panel-selected">
                        <p>I'm in Section 1.</p>
                    </div>
                    <div class="ks-tabs-panel">
                        <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div class="ks-tabs-panel">
                        <p>What up girl, this is Section 3.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="span8">
            <h4>tab 在右侧</h4>

            <p>tabs 体在左侧，tab 在右侧</p>

            <div class="ks-tabs ks-tabs-right">
                <div class="ks-tabs-bar">
                    <div class="ks-tabs-tab ks-button ks-tabs-tab-selected">Section 1</div>
                    <div class="ks-tabs-tab ks-button">Section 2</div>
                    <div class="ks-tabs-tab ks-button">Section 3</div>
                </div>
                <div class="ks-tabs-body">
                    <div class="ks-tabs-panel ks-tabs-panel-selected">
                        <p>I'm in Section 1.</p>
                    </div>
                    <div class="ks-tabs-panel">
                        <p>Howdy, I'm in Section 2.</p>
                    </div>
                    <div class="ks-tabs-panel">
                        <p>What up girl, this is Section 3.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<script src="../../../../g.tbcdn.cn/kissy/k/1.3.1/seed.js" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/seed.js" data-config="{combine:true}"></script>
<script>
    KISSY.use("tabs", function (S, Tabs) {

        S.all(".ks-tabs").each(function (n) {
            new Tabs({
                srcNode: n
            }).render();
        });

    });
</script>
</body>
</html>